//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import {
  Row,
  Col,
  Form,
  Input,
  Select,
  Button,
  Modal,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;


//查看表单
@Form.create()
class ViewForm extends PureComponent {
  static defaultProps = {
    handleViewModalVisibleByAuth: () => {},
    values: {},
  };

  constructor(props) {
    super(props);

    this.state = {
      formVals: {
        auth_id: props.values.auth_id,
        auth_name: props.values.auth_name,
        auth_type: props.values.auth_type,
        display: props.values.display,
        note: props.values.note,
        is_system_auth: props.values.is_system_auth,
        creator_id: props.values.creator_id,
        parent_id: props.values.parent_id,
      },
    };


  }



  renderContent = (formVals) => {
    const { form } = this.props;

    return (
      <Form  layout="vertical" hideRequiredMark>



                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                    <Col  md={12} sm={24}>
		                    <FormItem  label="角色名称">
		                        {form.getFieldDecorator('auth_name', {
		                        rules: [{ required: true, message: '请输入至少五个字符的角色名称！', min: 5 }],
		                        initialValue: formVals.auth_name,
		                        })(<Input  readOnly placeholder="请输入" />)}
		                    </FormItem>
                    </Col>




                    <Col  md={12} sm={24}>
		                    <FormItem  label="角色类型">
		                        {form.getFieldDecorator('auth_type', {
		                        rules: [{ required: true, message: '请输入至少五个字符的角色类型！', min: 5 }],
		                        initialValue: formVals.auth_type,
		                        })(<Input  readOnly placeholder="请输入" />)}
		                    </FormItem>
                    </Col>

                </Row>
                        
                        
                    
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



                    <Col  md={12} sm={24}>
		                    <FormItem  label="创建用户">
		                        {form.getFieldDecorator('creator_id', {
		                        rules: [{ required: true, message: '请输入至少五个字符的创建用户！', min: 5 }],
		                        initialValue: formVals.creator_id,
		                        })(<Input  readOnly placeholder="请输入" />)}
		                    </FormItem>
                    </Col>

										

                    <Col  md={12} sm={24}>
		                    <FormItem  label="是否系统角色">
		                        {form.getFieldDecorator('is_system_auth', {
		                        rules: [{ required: true, message: '请输入至少五个字符的是否系统角色！', min: 5 }],
		                        initialValue: formVals.is_system_auth + '',
		                        })(<Select placeholder="请选择" style={{ width: '100%' }}>
		                                <Option value="1">是</Option>
		                                <Option value="0">否</Option>
		                            </Select>
		                        )}
		                    </FormItem>
                    </Col>

                    {/*<Col  md={12} sm={24}>
                    <FormItem  label="父节点Id">
                        {form.getFieldDecorator('parent_id', {
                        rules: [{ required: true, message: '请输入至少五个字符的父节点Id！', min: 5 }],
                        initialValue: formVals.parent_id,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>*/}

                </Row>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{display: 'none'}}>



                    <Col  md={12} sm={24}>
                    <FormItem  label="备注">
                        {form.getFieldDecorator('note', {
                        rules: [{ required: true, message: '请输入至少五个字符的备注！', min: 5 }],
                        initialValue: formVals.note,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>


                </Row>




    </Form>
    );

  };



  render() {
    const { viewModalVisibleByAuth, handleViewModalVisibleByAuth, values } = this.props;

    return (
      <Modal
    width={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="查看"
    visible={viewModalVisibleByAuth}
    onCancel={() => handleViewModalVisibleByAuth(false, values)}
    footer={<Button key="back" onClick = { () => handleViewModalVisibleByAuth(false, values) }>取消</Button>}
>

    {this.renderContent(values)}
</Modal>
    );
  }

}


export default ViewForm;




